<template>
	<div class="g-pt g-pb">
		<HeaderTop :title="title"></HeaderTop>
		<div class="search-wrap">
			<div class="inner-box">
				<input type="text" placeholder="请输入商家或者美食名称" v-model="keyword">
				<button @click="search">提交</button>
			</div>
		</div>
		<section class="list" v-if="searchShop.length">
			<ul class="list_container">
				<!-- :to="'/shops?id=' + item.id" -->
				<router-link :to="{path: '/shops', query: {id: item.id}}" v-for="item in searchShop" class="list_li clearfix" tag="li" :key="item.id">
					<div class="item_left">
						<img :src="baseImgURL + item.image_path">
					</div>
					<div class="item_right">
						<div class="_p">
							<p>{{item.name}}</p>
							<p>月销{{item.month_sales || item.recent_order_num}}单</p>
							<p>{{item.delivery_fee || item.float_minimum_order_amount}}元起送 / 距离{{item.distance}}</p>
						</div>
					</div>
				</router-link>
			</ul>
		</section>
		
		<div v-show="isShowSearchNot" class="search-none">很抱歉没有内容!</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: '搜索',
				// 纬度
				latitude: 40.10038,
				// 经度
				longitude: 116.36867,
				// 搜索关键字
				keyword: '',
				// 搜索出来的数据数组
				searchShop: [],
				// 图片基础路径
				baseImgURL: 'http://cangdu.org:8001/img/',
				// 内容是否为空
				isShowSearchNot: false
			}
		},
		methods: {
			// 发起搜索
			async search() {
				// 拼接经纬度
				const geohash = this.latitude + ',' + this.longitude
				// 关键字去除空格
				const keyword = this.keyword.trim()
				
				// 检查关键字是否为空
				if(!keyword) return alert("请输入关键字")
				
				// 发起请求
				const { data : res } = await this.$http.get('/search_shops', {
					params: {
						geohash: geohash,
						keyword: keyword
					}
				})
				
				// 判断状态码
				if(res.code !== 0) return alert("搜索失败！")
				
				this.searchShop = res.data
				
			}
		},
		watch: {
			searchShop(value) {
				this.$nextTick(() => {
					if(!value.length) {
						this.isShowSearchNot = true
					}else {
						this.isShowSearchNot = false
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.search-wrap{
		height: 70px;
		background: #fff;
		
		.inner-box{
			box-sizing: border-box;
			padding: 0 10px;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			input{
				background: #F2F2F2;
				height: 40px;
				width: 75%;
				font-size: 14px;
				color: #333;
				box-sizing: border-box;
				padding: 0 10px;
			}
			button{
				height: 40px;
				width: 20%;
				background: #07A373;
				border: 0;
				outline: 0;
				font-size: 16px;
				color: #fff;
			}
		}			
	}
	
	// 列表
	section.list{
		.list_container{
			box-sizing: border-box;
			padding: 10px;
			.list_li{
				border-bottom: 1px solid #d4d4d4;
				padding: 10px 0;
				.item_left{
					float: left;
					width: 75px;
					height: 75px;
					margin-right: 10px;
					img{
						width: 100%;
					}
				}
				.item_right{
					margin-top: 10px;
					._p{
						font-size: 13px;
						line-height: 13px;
						p{
							margin-bottom: 5px;
							&:last-child{
								margin-bottom: 0;
							}
						}
					}
				}
			}
		}
	}
	
	.search-none{
		text-align: center;
		padding: 20px 0;
		font-size: 18px;
	}
</style>
